<template>
	<div class="weather-wrap">
		<c_header opacity="0.9" title="天气预报" :leftOptions="{showBack: true, backText: ''}" :rightOptions="{showMore: true}"></c_header>
		<div class="weather-list" v-if="weather">
			<div class="location fs-small transcolor">
				<div>{{weather.city}}<x-icon type="ios-information" size="17"></x-icon></div>
				<div class="updatetime">{{weather.updatetime}}跟新</div>
			</div>
			<div class="temperature">{{weather.temp}}°</div>
			<div class="weather fs-big">{{weather.weather}}</div>
			<div class="temp_hl transcolor">{{weather.temphigh}}° / {{weather.templow}}°</div>
			<div class="air fs-small transcolor">{{weather.aqi.aqiinfo.affect}}</div>
			<div class="wind-humidity fs-small transcolor border-bottom">
				<div>{{weather.winddirect + ' ' + weather.windpower}}</div>
				<div>相对湿度 {{weather.humidity}}%</div>
			</div>
			<div class="hourly fs-small transcolor">
				<div class="hourly-scroll" :style="'width:' + weather.hourly.length * 3 + 'rem'">
					<div v-for="item in weather.hourly">
						<div>{{item.time}}</div>
						<div><img :src="'/static/images/weather/' + item.img + '.png'"></div>
						<div>{{item.temp}}°</div>
					</div>
				</div>
			</div>
			<div class="sun fs-small transcolor border-top">
				<div>日出 {{weather.daily[0].sunrise || weather.daily[1].sunrise}}</div>
				<div></div>
				<div>日落{{weather.daily[0].sunset || weather.daily[1].sunset}}</div>
			</div>
			<ul class="daily transcolor border-bottom">
				<li v-for="item in weather.daily" class="border-top">
					<div>{{item.date.substr(5) + ' ' + item.week}}</div>
					<div>{{item.day.weather}}</div>
					<div>{{item.day.temphigh}}° / {{item.night.templow}}°</div>
				</li>
			</ul>
			<div class="life transcolor">
				<h2>生活指数</h2>
				<ul class="fs-small border-top border-bottom">
					<li v-for="item in weather.index" class="border-bottom">
						<h3>{{item.iname}}：{{ (item.ivalue != null ? item.ivalue : item.index) || '无'}}</h3>
						<p>建议：{{item.detail || '无'}}</p>
					</li>
				</ul>
			</div>
		</div>
		<c_sidemenu></c_sidemenu>
	</div>
</template>

<script>
import c_header from '@/components/c_header'
import c_sidemenu from '@/components/c_sidemenu'	

export default {
	name: 'weather',
	data () {
		return {
			
		}
	},
	components: { c_header, c_sidemenu},
	computed: {
		city () {
			return this.$store.state.location
		},
		weather () {
			return this.$store.state.weather
		}
	},
	methods: {
		bgcolor (key) {
			let bgcolor = {
				'晴': '#1466ba',
				'多云': '#004a95',
				'阴': '#00254c',
				'其他': '#001933'
			}
			return bgcolor[key] || bgcolor['其他']
		}
	},
	watch: {
		weather (value) {
			if(value){
				document.querySelector('.weather-wrap').style['background-color'] = this.bgcolor(this.weather.weather)		
			}
			this.$vux.loading.hide()
		}
	},
	mounted () {
		if(!this.weather){
			this.$vux.loading.show('天气查询中...')
		}
	}
}
</script>

<style>
	.weather-wrap{background: no-repeat top fixed;background-size: cover;margin-top: -46px;padding-top: 46px;}
	.weather-list{text-align: center;padding: .6rem 0 1rem;color: #fff;}
	.location{display: flex;margin: 0 .8rem;}
	.location div:first-child{position: relative;padding-right: 20px;line-height: 1;}
	.location .vux-x-icon {fill: #fff;position: absolute;right: 0;top: 50%;opacity: .7;transform: translateY(-50%);}
	.updatetime{text-align: right;flex: 1;}
	.temperature{font-size: 80px;padding: 4rem 0 1.5rem;}
	.temp_hl, .air{margin-top: .5rem;}
	.air{line-height: 22px;margin: .5rem 3rem 0;}
	/*公共样式*/
	.transcolor{color: rgba(255, 255, 255, .7);}
	.border-top, .border-bottom{position: relative;}
	.border-top:before, .border-bottom:after{content: '';display: block;width: 100%;left:0;border-top: 1px solid rgba(255,255,255,.3);transform: scaleY(.5) translateZ(0);position: absolute;}
	.border-top:before{top: 0;}
	.border-bottom:after{bottom: 0;}
	/*风-湿度*/
	.wind-humidity{display: flex;margin: 3.5rem .8rem 0;padding: .5rem 0;}
	.wind-humidity div{flex: 1;}
	.wind-humidity div:first-child{text-align: left;}
	.wind-humidity div:last-child{text-align: right;}
	/*小时预报*/
	.hourly, .sun{margin:0 .8rem;overflow-x: auto;padding: .8rem 0;line-height: 30px;position: relative;}
	.hourly-scroll{display: flex;}
	.hourly-scroll>div{flex: 1;}
	.hourly img{width: 1.5rem;}
	/*日出日落*/
	.sun{line-height: 14px;text-align: left;display: flex;align-items: center;}
	.sun div:nth-child(2){flex: 1;height: 0;border-top: 1px dashed rgba(255,255,255,.5);margin: 0 1rem;position: relative;}
	.sun div:nth-child(2):after{content: '';display: block;width: 10px;height: 10px;border-right: 1px solid rgba(255,255,255,.5);border-bottom: 1px solid rgba(255,255,255,.5);position: absolute;right: 0;top: -6px;transform: rotate(-45deg);}
	/*未来一周预报*/
	.daily{margin: 0 .8rem;}
	.daily li{display: flex;padding: .8rem 0;}
	.daily li:first-child{display: none;}
	.daily li>div:nth-child(2){flex: 1;}
	/*生活指数*/
	.life{margin: 0 .8rem;text-align: left;}
	.life h2{padding: .8rem 0;}
	.life li{margin-left:.8rem;padding: .8rem 0;line-height: 22px;}
	.life li:last-child{border: none;}
	.life li h3{margin-bottom: .2rem;}
	.life li p{text-align: justify;}
	
</style>
